<template>
	
	<view style="background: #F1F5FF;height: 100vh;">
		
		<myHeadTab>活动详情</myHeadTab>
		
		<view style="height: 32rpx;"></view>
		<uni-row style="height: 46rpx;">
			<uni-col :span="1" :offset="1">
				<image style="width: 36rpx;height: 36rpx;position: relative;top: 6rpx;" src="../../../static/名称.png"></image>
			</uni-col>
			
			<uni-col :span="20">
				<text class="f3" style="position: relative;left: 12rpx;">{{activity?.title}}</text>
				
			</uni-col>
			
			<uni-col :span="1" >
				<image style="height: 32rpx;width: 32rpx;position: relative;top: 6rpx;" src="../../../static/分享.png"></image>
			</uni-col>
			
		</uni-row>
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 124rpx;padding-top: 24rpx;padding-left: 24rpx;">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动来源</text>
					</view>
					<view style="height: 12rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 60rpx;">
						<text class="f5" style="position: relative;left: 16rpx;">派发</text>
					</view>
				</view>
			</uni-col>
		</uni-row>
		
		
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 244rpx;padding-top: 24rpx;padding-left: 24rpx;" >
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动时间</text>
					</view>
					<view style="height: 4rpx;width: 100%;"></view>
					
					<view style="width: 384rpx;height: 168rpx;">
						
						<view>
							<text class="f6">计划开始日期：{{activity?.beiginDate}}</text>
						</view>
						
						<view>
							<text class="f6">计划结束日期：{{activity?.endDate}}</text>
						</view>
						
						<view>
							<text class="f6">合计时长：{{calculateDuration(activity?.beiginDate,activity?.endDate)}}天</text>
						</view>


						
					</view>
					
				</view>
			</uni-col>
		</uni-row>
		
		
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 124rpx;padding-top: 24rpx;padding-left: 24rpx;" >
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动区域</text>
					</view>
					
					<view style="height: 12rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 300rpx;">
						<text class="f5" style="position: relative;left: 16rpx;">{{splitLocation(activity?.area)}}</text>
					</view>
					
				</view>
			</uni-col>
		</uni-row>
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 124rpx;padding-top: 24rpx;padding-left: 24rpx;" >
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动牵头宣传组</text>
					</view>
					
					<view style="height: 12rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 200rpx;">
						<text class="f5" style="position: relative;left: 16rpx;">{{activity?.group}}</text>
					</view>
					
				</view>
			</uni-col>
		</uni-row>
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 776rpx;padding-top: 24rpx;padding-left: 24rpx;padding-right: 24rpx;" >
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">基本信息填写</text>
					</view>
					
					<view style="height: 16rpx;width: 100%;"></view>
					
					<template v-for="(item,index) in inforColumn" :key="index">
						<view style="height: 72rpx;width: 100%;display: flex;">
						
							<view style="height: 34rpx;width: 118rpx;">
								<text class="f7">{{item.title}} <font style="font-size: 24rpx;color: #FF3636;">*</font></text>
							</view>
							
							<view style="width: 16rpx;height: 100%;"></view>
						
							<view style="width: 504rpx;height: 72rpx;">
								<input class="f9" @input="handleInput($event,index)" v-if="index < 6" :class="[index < 3 ? 'i1':'i2']" style="height: 100%;padding-left: 24rpx;" :placeholder="item.pl" placeholder-style="font-family: PingFangSC-Regular;font-weight: 400;font-size: 24rpx;color: #A9ACB4;letter-spacing: 0;"/>
								<picker :range="item.data" @change="handleSelect($event,item)" v-if="index >=6" class="i2" style="height: 100%;padding-left: 24rpx;"  :placeholder="item.pl" >
									<view class="f9 picker"  style="line-height: 72rpx;" v-if="(form.school != ''&& index == 6) || (form.origin != '' && index == 7)" >
								         {{ index == 6 ? form.school : form.origin}}
								     </view>
								     <view style="height: 100%;line-height: 72rpx;" v-else class="f8">{{item.pl}}</view>
								</picker>
							</view>
							
						</view>
						<view style="height: 16rpx;width: 100%;"></view>
					</template>
					
					
				</view>
			</uni-col>
		</uni-row>
		<view style="height: 32rpx;background: #F1F5FF;"></view>
		
		<uni-row style="background: #F1F5FF;">
			<uni-col :span="22" :offset="1">
				<button @click="submit" class="btn"><text class="f2" style="position: relative;top: -8rpx;">立即报名</text></button>
			</uni-col>
		</uni-row>
		<view style="height: 24rpx;background: #F1F5FF;"></view>
		
	
		<uni-row style="height: 34rpx;background: #F1F5FF;">
			<uni-col :span="14" :offset="5" style="display: flex;justify-content: center;">
				<text class="f1">报名审核通过，可见更多详细活动信息</text>
			</uni-col>
		</uni-row>
		<view style="height: 28rpx;background: #F1F5FF;"></view>
		
	</view>
</template>

<script setup>

import { onMounted,ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import myHeadTab from '../../../component/myHeadTab/index.vue'


	const activityId = ref();
	onLoad((options) => {
		console.log('接受值:',options);
		activityId.value = options;
	})
		
		const activity = ref();
		
		onMounted(()=>{
			uni.request({
				url:'/data/activities.json',
				data: {activityId: activityId.value},
				success(res){
					activity.value = res.data.at(0);
				}
			})
		})
		
	
	    function calculateDuration(startDate,endDate){  
	      if (startDate && endDate) {  
	        const start = new Date(startDate);  
	        const end = new Date(endDate);  
	        const diffTime = Math.abs(end - start);  
	        return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1; // 转换为天数  
	      } else {  
	        return null;  
	        alert('请输入有效的日期');  
	      }  
	    }
		
		   const splitLocation = (location) => {  
		      if (location) {  
		        // 使用正则表达式和 ng-replace 分割  
		        return location.replace(/(.{2,3}省|.{2,3}市|.{2,3}区)/g, '$1/').slice(0, -1);  
		      } else {  
		        return '';  
		        alert('请输入有效的省市区');  
		      }  
		    }; 
		
		
		const inforColumn = [
			{
				title: '职工号',
				pl: '请输入职工号'
			},
			{
				title: '姓名',
				pl: '请输入姓名'
			},
			{
				title: '单位',
				pl:'请输入单位'
			},
			{
				title: '职务',
				pl:'请输入职务'
			},
			{
				title: '职称',
				pl:'请输入职称'
			},
			{
				title: '联系方式',
				pl:'请输入联系方式'
			},
			{
				title: '毕业中学',
				pl:'请选择毕业中学',
				data:['榆次二中','榆次一中']
			},
			{
				title: '籍贯',
				pl:'请选择籍贯',
				data:['汉','藏族']
			}
		]
		
		const form = {
			jobNumber: '',
			name: '',
			unit: '',
			job: '',
			jobName: '',
			phone: '',
			school: '',
			origin: '',
		}
		
		function handleSelect(event,item){
			if(item.title == '毕业中学'){
				form.school = item.data.at(event.detail.value) 
			}else{
				form.origin = item.data.at(event.detail.value)
			}
		}
		
		function handleInput(event,index){
			switch(index){
				case 0:
				form.jobNumber = event.detail.value;
				break;
				case 1:
				form.name = event.detail.value;
				break;
				case 2:
				form.unit= event.detail.value;
				break;
				case 3:
				form.job = event.detail.value;
				break;
				case 4:
				form.jobName = event.detail.value;
				break;
				case 5:
				form.phone = event.detail.value
				break;
			}
			event.detail.value
		}

		function submit(){
			if(form.jobNumber != ''
				&& form.name != ''
				&& form.unit != ''
				&& form.job != ''
				&& form.jobName != ''
				&& form.phone != ''
				&& form.school != ''
				&& form.origin != ''
			){
				// 像后端发请求成功后页面跳转
				uni.navigateTo({
					url:`/pages/activities/component/success`, //建议这么写
				})
			}else{
				uni.showModal({
					title: '必填项不能为空',
					showCancel: false
				})
			}
		}
		
		
</script>

<style scoped>


.card{
	background: #FFFFFF;
	border-radius: 16rpx;
}

.btn{
	height: 80rpx;
	background: #276EFF;
	border-radius: 16rpx;
	
}

.f1{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #939393;
	letter-spacing: 0;
	text-align: center;
}

.f2{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 30rpx;
	color: #FFFFFF;
	letter-spacing: 0;
	line-height: 40rpx;
}

.f3{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 32rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 46rpx;
}
.f4{
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 24rpx;
color: #5D5C5C;
letter-spacing: 0;
line-height: 40rpx;	
}

.f5{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 40rpx;
}

.f6{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 56rpx;
}
.f7{
	 color: #5d5c5c;
	 font-size: 24rpx;
	 font-face: PingFangSC;
	 font-weight: 400;
	 line-height: 72rpx;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
}
.f8{
	font-family: PingFangSC-Regular;font-weight: 400;font-size: 24rpx;color: #A9ACB4;letter-spacing: 0;
}
.f9{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 12px;
	color: #000000;
	letter-spacing: 0;
}
.i1{
	background: #F4F4F4;
	border-radius: 8rpx;
}
.i2{
	background: #F1F5FF;
	border: 2rpx solid #E7EDFB;
	border-radius: 8rpx;
}

</style>
